import React, { useEffect, useState } from 'react';
import { Modal, Select, Button, message, InputNumber } from 'antd';
import { Input, Form } from 'antd';
import { connect } from 'dva';
import { stockInOrOut } from '../service';
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 5,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 24,
    },
    md: {
      span: 24,
    },
  },
};
const submitFormLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 10,
      offset: 5,
    },
  },
};
const CreateForm = props => {
  const { modalVisible, onCancel, dispatch, refresh, currentRecord } = props;
  const [memberList, setMemberList] = useState([]);
  const [submitting, setSubmitting] = useState(false);
  const [form] = Form.useForm();
  useEffect(() => {
    dispatch({
      type: 'cubeReservation/fetchMembersList',
    }).then((data) => {
      setMemberList(data);
    })
  }, []);
  const onFinish = async () => {
    const values = await form.validateFields();
    values['merchandiseId'] = currentRecord?.id;
    let result = await stockInOrOut(values);
    if (result?.code === 0) {
      message.success(result.message)
      refresh && refresh();
      onCancel()
    }
  }
  return (
    <Modal
      destroyOnClose
      title="赠品出入库"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Form
        name="basic"
        form={form}
        initialValues={{
          name: currentRecord?.name
        }}
      >
        <Form.Item
          label="赠品名称"
          name="name"
          {...formItemLayout}
        >
          <Input placeholder="请输入" allowClear disabled />
        </Form.Item>
        <Form.Item
          label="出入库"
          name="type"
          required
          {...formItemLayout}
        >
          <Select placeholder='请选择'>
            <Option value={'in'}>入库</Option>
            <Option value={'out'}>出库</Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="数量"
          name="quantity"
          required
          {...formItemLayout}
        >
          <InputNumber placeholder='请输入' min={1}/>
        </Form.Item>
        <Form.Item
          label="客户"
          name="memberId"
          {...formItemLayout}
        >
          <Select placeholder='请选择'>
            {memberList?.map((item) => <Option key={item.id}>{item.name}</Option>)}
          </Select>
        </Form.Item>
        <Form.Item
          label="备注"
          name="depict"
          {...formItemLayout}
        >
          <Input placeholder="请输入" allowClear />
        </Form.Item>
        <Form.Item {...submitFormLayout}>
          <Button type="primary" onClick={onFinish} htmlType='submit' loading={submitting}>
            提交
          </Button>
          <Button
            style={{
              marginLeft: 8,
            }}
            onClick={() => onCancel()}
          >
            取消
          </Button>
        </Form.Item>
      </Form >
    </Modal >
  );
};

export default connect(({ loading, cubeGift, cubeReservation }) => ({
}))(CreateForm);
